 /*
 * @description: 寝室视频上传
 * @Author: along
 * @Date: 2020-10-16
 * @Last Modified by: along
 * @Last Modified time: 2020-10-20
 */
<template>
    <div class="dormVideoUpload">
        <!-- 基本信息 -->
        <div class="base-info">
            <div class="header">
                <div class="header-title">基础信息</div>
            </div>
            <div class="content">
                <div class="base-info-item">
                    <div class="item-label">批次组名称：</div>
                    <div class="item-value">{{ baseInfo.title ? baseInfo.title : '--' }}</div>
                </div>
                <div class="base-info-item">
                    <div class="item-label">寝室推广数量：</div>
                    <div class="item-value">{{ baseInfo.count ? baseInfo.count : '--' }}</div>
                </div>
                <div class="base-info-item">
                    <div class="item-label">寝室性别：</div>
                    <div class="item-value">
                        {{ baseInfo.sex === 1 ? '男' : baseInfo.sex === 2 ? '女' : '不限' }}
                    </div>
                </div>
                <div class="base-info-item">
                    <div class="item-label">学校名称：</div>
                    <div class="item-value">{{ baseInfo.school_name ? baseInfo.school_name : '--' }}</div>
                </div>
                <div class="base-info-item">
                    <div class="item-label">视频数量：</div>
                    <div class="item-value">{{ baseInfo.count ? baseInfo.count : '--' }}</div>
                </div>
            </div>
        </div>
        <!-- 公司信息 -->
        <div
            class="base-info"
            style="height: 300px"
        >
            <div class="header">
                <div class="header-title">公司信息</div>
            </div>
            <div class="content">
                <!-- table -->
                <el-table
                    :data="baseInfo.hire_link_list"
                    max-height="200"
                    style="width: 100%;"
                    ref="tempLateName"
                    class="data-table"
                >
                    <el-table-column
                        label="序号"
                        align="center"
                        width="80"
                        type="index"
                    />
                    <el-table-column
                        prop="company_name"
                        label="公司名称"
                        show-overflow-tooltip
                        align="left"
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        prop="series_title"
                        label="产品名称"
                        show-overflow-tooltip
                        align="left"
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        prop="series_index"
                        label="批次"
                        show-overflow-tooltip
                        align="center"
                    />
                    <el-table-column
                        label="最近提交时间"
                        align="center"
                        width="200"
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <div class="tableList">
            <div>
                <div class="header">
                    <p class="title">上传视频</p>
                    <!-- <p class="desc">视频文件支持mp4、WebM、Ogg</p> -->
                </div>
                <div class="filter">
                    <div class="filter-left">
                        <el-radio-group
                            v-model="formData.status"
                            size="small"
                            @change="getTableData(1)"
                        >
                            <el-radio-button label="99" >全部</el-radio-button>
                            <!-- <el-radio-button label="0">待提审</el-radio-button> -->
                            <el-radio-button label="1">待审核</el-radio-button>
                            <el-radio-button label="2">已通过</el-radio-button>
                            <el-radio-button label="-1">未通过</el-radio-button>
                        </el-radio-group>
                        <p class="filter-left-title">学校名称</p>
                        <el-select
                            v-model="formData.keyword_school"
                            filterable
                            clearable
                            size="small"
                            reserve-keyword
                            placeholder="请输入学校名称"
                            :loading="loading"
                            @change="getTableData(1)"
                        >
                            <el-option
                                v-for="item in school_tree"
                                :key="item.school_id"
                                :label="item.school_name"
                                :value="item.school_id"
                            />
                        </el-select>
                    </div>
                    <el-button
                        size="small"
                        type="primary"
                        @click="uploadVideo()"
                    >
                        上传视频
                    </el-button>
                </div>
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: calc(100% - 48px);max-height:550px"
                    border
                    ref="dormVideoUp"
                    @select="fnSelect"
                    @select-all="fnSelectAllTop"
                    @selection-change="handleSelectionChange"
                    :style="{margin: '0 24px 0 24px'}"
                >
                    <el-table-column
                        type="selection"
                        width="40"
                        fixed="left"
                    />
                    <el-table-column
                        type="index"
                        width="80"
                        label="序号"
                        align="center"
                    />
                    <el-table-column
                        prop="video_name"
                        label="视频名称"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="school_name"
                        label="学校名称"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="video_size"
                        label="视频大小"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.video_size | transformByte }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="video_duration"
                        label="视频长度"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <p v-if="scope.row.video_duration">{{ scope.row.video_duration }}s</p>
                            <p v-else>--</p>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column
                        prop="video_trans_status"
                        label="转换状态"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="left"
                    >
                        <template slot-scope="scope">
                            <p v-if="scope.row.video_trans_status == 1">转换中</p>
                            <p v-else-if="scope.row.video_trans_status == 2">转换成功</p>
                            <p v-else-if="scope.row.video_trans_status == -1">转换失败</p>
                            <p v-else-if="scope.row.video_trans_status == 0">待转换</p>
                            <p v-else>--</p>
                        </template>
                    </el-table-column> -->
                    <el-table-column
                        prop="audit_status"
                        label="审核状态"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="left"
                    >
                        <template slot-scope="scope">
                            <p v-if="scope.row.audit_status == 1">待审核</p>
                            <p v-else-if="scope.row.audit_status == 2">已通过</p>
                            <p v-else-if="scope.row.audit_status == -1">未通过</p>
                            <p v-else-if="scope.row.audit_status == 0">
                                <!-- <span
                                    class="audit_wait"
                                    v-if="scope.row.video_trans_status == 2"
                                /> -->
                                待提审
                            </p>
                            <p v-else>--</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="audit_reason"
                        label="审核理由"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        label="操作"
                        align="center"
                        fixed="right"
                        :width="200"
                    >
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                class="curse-add"
                                :id="'playVideo' + scope.$index"
                                @click="playVideo(scope.row, scope.$index)"
                            >
                                播放
                            </el-button>
                            <el-button
                                type="text"
                                class="curse-add"
                                @click="deleteVideo(scope.row)"
                            >
                                删除
                            </el-button>
                            <el-button
                                type="text"
                                class="curse-add"
                                @click="nextVideo(scope.row)"
                            >
                                重新上传
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            <!-- /table -->
            </div>

            <!-- /分页 -->
            <div class="pagination-wrapper clearfix">
                <el-checkbox
                    v-model="checkedAll"
                    :indeterminate="checkIndeterminate"
                    @change="fnChangeChecked"
                >全选</el-checkbox>
                <el-button
                    type="text"
                    :disabled="multipleSelection.length == 0 ? true : false"
                    @click="deleteAll()"
                    :style="{marginLeft: '15px'}"
                >删除</el-button>
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page.sync="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>
        </div>

        <!-- 删除弹窗 -->
        <dialog-delete
            ref="delete"
            :url="'http://cdn.zsdx.cn/phaadmin/dialog-waring.png'"
            :title="'是否确认删除?'"
            :content="'删除会影响审核数据和商家端展示的数据'"
            @confrim="confrim()"
        />

        <!-- 全选删除弹窗 -->
        <dialog-delete
            ref="deleteAll"
            :url="'http://cdn.zsdx.cn/phaadmin/dialog-waring.png'"
            :title="'是否删除所选择的视频?'"
            :content="'删除会影响审核数据和商家端展示的数据'"
            @confrim="confrimAll()"
        />

        <!-- 视频播放组件 -->
        <video-simple
            ref="videoSimple"
            :url="url"
            :top="54"
            :left="left"
        />

        <!-- 视频上传 -->
        <video-upload
            ref="videoUpload"
            :limit="limit"
            :school_tree="schoolList"
            @success="success"
            @update="update"
        />
    </div>
</template>

<script>
import dialogDelete from '@/components/dialog/index.vue';
import videoSimple from '@/components/dorm/video-simple.vue';
import videoUpload from '@/components/dorm/video-upload.vue';
import { back } from '@/mixin/back';

const CONFIG = {
    video_batch: '',
    batch_name: '',
    shop_title: '',
    status: '99',
    keyword_school: ''
};


const TABLE = {
    checkIndeterminate: false,
    multipleSelection: [],
    checkedAll: false,
};

export default {
    mixins: [back],
    components: {
        dialogDelete,
        videoSimple,
        videoUpload
    },
    data () {
        return {
            audit_reason: '',//重新上传视频记录
            update_video_no: '',//重新上传视频id/删除记录
            ID: '',//批次唯一ID
            left: 0,//视频组件右边距
            url: '',
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            formData: {
                ...CONFIG
            },
            baseInfo: {},
            ...TABLE,
            school_tree: [],
            tableData: [],
            authResult: {},
            limit: 1,
            loading: false,
            schoolList: []
        };
    },
    filters: {
        transformByte(size) {
            if (!size) {
                return '0B';
            }

            var num = 1024.0; // byte

            if (size < num) {
                return size + 'B';
            }
            if (size < Math.pow(num, 2)) {
                return (size / num).toFixed(2) + 'K';
            } // kb
            if (size < Math.pow(num, 3)) {
                return (size / Math.pow(num, 2)).toFixed(2) + 'M';
            } // M
            if (size < Math.pow(num, 4)) {
                return (size / Math.pow(num, 3)).toFixed(2) + 'G';
            } // G
            return (size / Math.pow(num, 4)).toFixed(2) + 'T'; // T
        }
    },
    mounted () {
        this.init();
    },
    methods: {
        /**
         * @description 初始化页面数据
         */
        init () {
            this.$store.commit('SET_HEADER', [{ title: "官网"},{ title: "商家增值服务"},{title: '寝室视频上传'},{title: '上传视频'}]);
            this.authResult = this.$route.meta.authResult;
            let query = this.$route.query;

            if(query.series_no) {
                this.ID = query.series_no;
                this.getTableData();
                this.getSchooltree();
                this.getSeries();
            }
        },

        /**
         * @description 获取表格数据
         */
        getTableData (page) {
            this.$post('/student/room_series_video%5Cget_list', {
                page_id: page || this.page.now_page,
                series_no: this.ID,
                school_id: this.formData.keyword_school,
                video_name: '',
                audit_status: this.formData.status
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * @description 获取批次信息
         */
        getSeries () {
            this.$post('/student/room_series%5Cget', {
                series_no: this.ID
            }, resp => {
                if (resp.code === 1) {
                    this.baseInfo = resp.data;
                }
            });
        },

        /**
         * @description 获取学校数据列表
         */
        getSchooltree () {
            this.$post('/student/room_series_video%5Cget_school_list',{
                series_no: this.ID
            },resp => {
                if (resp.code == 1) {
                    this.school_tree = resp.data;
                }
            });

            this.$post('/student/local_info%5Cschool_tree',{},resp => {
                if (resp.code == 1) {
                    this.schoolList = resp.data.tree;
                }
            });
        },

        /**
         * @description 打开上传视频弹窗
         */
        uploadVideo () {
            this.limit = 999;
            this.$refs.videoUpload.clearID();
            this.$refs.videoUpload.setType('add');
            this.$refs.videoUpload.show();
        },

        /**
         * @description 播放视频
         */
        playVideo (row, index) {
            this.left = document.querySelector('#playVideo' + index).getClientRects()[0].x - 278 - 40;
            this.url = row.video_url;
            this.$refs.videoSimple.showVideo();
        },

        /**
         * @description 视频上传成功勾子函数
         */
        success (list) {
            console.log(list, '上传完成');

            let video_json = list.reduce((cur,next) => {
                cur.push({
                    series_no: this.ID,
                    school_id: next.school_id[2],
                    video_name: next.name,
                    video_size: next.video_size,
                    video_path: next.video_path,
                    video_ext: next.video_ext
                });
                return cur;
            },[]);

            this.$post('/student/room_series_video%5Cadd_batch',{
                series_no: this.ID,
                video_json: JSON.stringify(video_json)
            },resp=>{
                if (resp.code == 1) {
                    this.getTableData();
                    // this.$refs.videoUpload.hide();
                    this.$notify({
                        title: '提示',
                        message: '上传成功',
                        type: 'success',
                        duration: 2000
                    });
                } else if (resp.code == 0) {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 重新上传
         */
        nextVideo (row) {
            this.limit = 1;
            this.$refs.videoUpload.setID(row.school_id);
            this.$refs.videoUpload.setType('edit');
            this.$refs.videoUpload.show();
            this.update_video_no = row.video_no;
            this.audit_reason = row.audit_reason;
            console.log('row', row);
        },

        /**
         * @description 重新上传成功勾子函数
         */
        update (list) {
            console.log('list_update', list);

            let video_json = list.reduce((cur,next) => {
                cur.push({
                    video_no: this.update_video_no,
                    school_id: next.school_id,
                    video_name: next.name,
                    video_path: next.video_path,
                    video_size: next.video_size,
                    video_ext: next.video_ext,
                    audit_reason: this.audit_reason
                });
                return cur;
            },[]);

            this.$post('/student/room_series_video%5Cupdate_file',{
                ...video_json[0]
            },resp=>{
                if (resp.code == 1) {
                    this.getTableData();
                    this.$refs.videoUpload.hide();
                    this.$notify({
                        title: '提示',
                        message: '更新成功',
                        type: 'success',
                        duration: 2000
                    });
                } else if (resp.code == 0) {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 删除视频
         */
        deleteVideo (row) {
            if(!this.authResult.auth_delete) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.update_video_no = row.video_no;
            this.$refs.delete.showDialog();
        },

        /**
         * @description 确定删除
         */
        confrim () {
            this.$post('/student/room_series_video%5Cdelete',{
                video_no: this.update_video_no
            },resp=>{
                if (resp.code == 1) {
                    this.getTableData();
                    this.$notify({
                        title: '提示',
                        message: '删除成功',
                        type: 'success',
                        duration: 2000
                    });
                } else if (resp.code == 0) {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 全选删除
         */
        deleteAll () {
            if(!this.authResult.auth_delete) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.$refs.deleteAll.showDialog();
        },

        /**
         * @description 确定删除全部视频
         */
        confrimAll () {
            console.log('multipleSelection', this.multipleSelection);

            let nos = this.multipleSelection.reduce((cur,next) => {
                cur.push(next.video_no);
                return cur;
            },[]);

            nos.forEach(element => {
                this.$post('/student/room_series_video%5Cdelete',{
                    video_no: element
                },resp=>{
                    if (resp.code == 1) {
                        //
                    }
                });
            });

            setTimeout(()=>{
                this.getTableData(1);
                this.$notify({
                    title: '提示',
                    message: '删除成功',
                    type: 'success',
                    duration: 2000
                });
            },500);
        },

        /**
         * @description 全选逻辑操作
         */
        fnSelect(selection) {
            if(selection.length == this.tableData.length) {
                this.checkedAll = true;
            }else{
                this.checkedAll = false;
            }
            if(selection.length > 0 && selection.length < this.tableData.length) {
                this.checkIndeterminate = true;
            }else{
                this.checkIndeterminate = false;
            }
        },
        fnSelectAllTop(selection) {
            if(selection.length > 0) {
                this.checkedAll = true;
            }else{
                this.checkedAll = false;
            }
            if(selection.length > 0 && selection.length < this.tableData.length) {
                this.checkIndeterminate = true;
            }else{
                this.checkIndeterminate = false;
            }
        },
        fnChangeChecked() {
            if(this.checkedAll){
                this.toggleSelection(1);
            }else{
                this.toggleSelection();
            }
        },
        toggleSelection(rows) {
            if (rows) {
                this.$refs.dormVideoUp.toggleAllSelection();
            } else {
                this.$refs.dormVideoUp.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.dormVideoUpload {
    width: calc(100% - 24px);
    // height: calc(100% - 24px);
    margin: 12px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .header {
        height: 66px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #F0F2F5;
        padding: 24px;

        .header-title {
            color: #333333;
            font-size: 20px;
            font-weight: 500;
        }
    }
    .base-info {
        height: 162px;
        margin-bottom: 12px;
        background: #fff;
        flex-shrink: 0;
        .content {
            display: flex;
            flex-wrap: wrap;
            padding: 24px 36px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            .base-info-item {
                width: 33%;
                display: flex;
                font-size: 14px;
                margin-bottom: 20px;
                .item-label {
                    color: #888888;
                }
                .item-value {
                    color: #333333;
                }
            }
        }
        .content.student {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 12px 36px 24px;
            .tips {
                font-size: 12px;
                color: #999999;
                margin-left: 54px;
            }
        }
    }
    .tableList {
        flex: 1;
        background: #ffffff;
        margin-top: 12px;
        margin-bottom: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .header {
            width: 100%;
            height: 68px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            border-bottom: 1px #EBEEF5 solid;
            .title {
                color: #333;
                font-size: 20px;
                font-weight: 500;
                position: relative;
            }
            .desc {
                color: #999;
                font-size: 14px;
                margin-left: 24px;
                position: relative;
                top: 4px;
            }
        }
        .filter {
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 24px;
            &-left {
                display: flex;
                align-items: center;
            }
            &-left-title {
                color: #333;
                font-size: 14px;
                margin: 0 16px 0 32px;
            }
        }
    }
    /* 分页 */
    .pagination-wrapper {
        width: 100%;
        padding: 10px 24px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }
    .audit_zero, .audit_one, .audit_err, .audit_wait {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #FFAF39;
        margin-right: 6px;
        position: relative;
        top: -2px;
    }
    .audit_one {
        background: #4CD964;
    }
    .audit_err {
        background: #FF3030;
    }
    .audit_wait {
        background: #1890FF;
    }
}
</style>

<style lang="less">
    .dormVideoUpload{
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border-right: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border-right: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
        .el-dialog__header {
            padding-top: 10px;
            box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
            display: flex;
            align-items: center;
            background: #FAFAFA;
            border-radius: 4px 4px 0 0;
            .el-dialog__title {
                font-weight: 500;
                color: #333;
                font-size: 14px;
            }
            .el-icon-close:before {
                color: rgb(194,194,194);
                font-size: 17px;
                font-weight: bold;
            }
            .el-dialog__headerbtn {
                top: 14px;
            }
        }
        .config {
            .el-input__inner {
                background: #F5F5F5;
                border-radius: 4px;
                border: none;
                color: #333;
            }
        }
    }
</style>
